import {
  defineComponent,
  h,
  reactive,
  onUnmounted,
  onMounted,
} from "@vue/runtime-core";
import Map from "../component/Map";
import Plane from "../component/Plane";
import EnemyPlane from "../component/EnemyPlane";
import Bullet from "../component/Bullet";
import { game } from "../Game";
import { collisionDetection } from "../utils/index";
export default defineComponent({
  setup(props, ctx) {
    // 我方飞机数据
    const { planeInfo } = usePlaneInfo();
    // 地方飞机
    const { enemyPlaneList, removePlane } = useEnemyPlanInfo();
    // 我方子弹数据
    let { bulletSelfList, addBullets, removeBullets } = useBulletSelfInfo();

    // 战斗模块
    useFighting(
      enemyPlaneList,
      bulletSelfList,
      planeInfo,
      ctx.emit,
      removePlane,
      removeBullets
    );

    const onAttack = (data) => {
      addBullets(data);
    };

    return { planeInfo, enemyPlaneList, bulletSelfList, onAttack };
  },

  render(ctx) {
    function renderEnemyPlanList() {
      return ctx.enemyPlaneList.map((data) => {
        return h(EnemyPlane, {
          x: data.x,
          y: data.y,
          width: data.width,
          height: data.height,
        });
      });
    }

    function renderSlefBullet() {
      return ctx.bulletSelfList.map((data) => {
        return h(Bullet, {
          x: data.x,
          y: data.y,
          width: data.width,
          height: data.height,
          isSelf: true,
        });
      });
    }
    return h("Container", [
      h(Map),
      h(Plane, {
        ...ctx.planeInfo,
        onAttack: ctx.onAttack,
      }),
      ...renderEnemyPlanList(),
      ...renderSlefBullet(),
    ]);
  },
});

function useFighting(
  enemyPlaneList,
  bulletSelfList,
  planeInfo,
  emit,
  removePlane,
  removeBullets
) {
  // 主进程
  const handerTicker = () => {
    // 敌机运动
    enemyPlaneList.forEach((enemyPlane, index) => {
      enemyPlane.y++;

      if (enemyPlane.y > 1080) {
        removePlane(index);
      }
    });

    // 子弹运动
    bulletSelfList.forEach((bullet, index) => {
      bullet.y--;

      if (bullet.y < -99) {
        removeBullets(index);
      }
    });

    // 判断我方子弹是否撞到敌方飞机
    bulletSelfList.forEach((bulletSelf, bIndex) => {
      enemyPlaneList.forEach((enemyPlane, eIndex) => {
        if (collisionDetection(bulletSelf, enemyPlane)) {
          removeBullets(bIndex);
          removePlane(eIndex);
        }
      });
    });

    // 判断是否撞机
    enemyPlaneList.forEach((enemyPlane) => {
      if (collisionDetection(enemyPlane, planeInfo)) {
        emit("changePage", "endPage");
      }
    });
  };

  // 开始
  onMounted(() => {
    game.ticker.add(handerTicker);
  });

  // 结束
  onUnmounted(() => {
    game.ticker.remove(handerTicker);
  });
}

function usePlaneInfo() {
  let planeInfo = reactive({ x: 280, y: 650, width: 258, height: 364 });
  const step = 25;
  window.addEventListener("keydown", (event) => {
    switch (event.code) {
      case "ArrowUp":
        planeInfo.y -= step;
        break;
      case "ArrowDown":
        planeInfo.y += step;
        break;
      case "ArrowLeft":
        planeInfo.x -= step;
        break;
      case "ArrowRight":
        planeInfo.x += step;
        break;
    }
  });

  return { planeInfo };
}

function useBulletSelfInfo() {
  let bulletSelfList = reactive([]);
  const addBullets = (data) => {
    bulletSelfList.push({ ...data, width: 61, height: 99 });
  };

  const removeBullets = (index) => {
    bulletSelfList.splice(index, 1);
  };

  return { bulletSelfList, addBullets, removeBullets };
}

function useEnemyPlanInfo() {
  const enemyPlaneList = reactive([
    { x: 150, y: 0, width: 308, height: 207 },
    { x: 170, y: 120, width: 308, height: 207 },
  ]);

  const removePlane = (index) => {
    enemyPlaneList.splice(index, 1);
  };

  return { enemyPlaneList, removePlane };
}
